<template>
  <div class="modelDetailMain h100" ref="modelDetailMainRef">
    <a-tabs v-model="activeKey" class="tabCommon modelDetailMainTab">
      <a-tab-pane key="relatedECU" :tab="$t('relatedECU')" ref="tabPaneRef">
        <model-detail-main-ecu-lists
          v-if="activeKey === 'relatedECU'"
          :modelId="modelId"
        ></model-detail-main-ecu-lists>
      </a-tab-pane>
      <a-tab-pane key="relatedVehicle" :tab="$t('relatedVehicle')" force-render>
        <model-detail-main-vicle-lists
          v-if="activeKey === 'relatedVehicle'"
          :modelId="modelId"
        ></model-detail-main-vicle-lists>
      </a-tab-pane>
      <a-tab-pane key="managedServices" :tab="$t('managedServices')" force-render>
        <model-detail-main-service
          v-if="activeKey === 'managedServices'"
          :modelId="modelId"
        ></model-detail-main-service>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import ModelDetailMainEcuLists from './ModelDetailMainEcuLists'
import ModelDetailMainVicleLists from './ModelDetailMainVicleLists'
import ModelDetailMainService from './ModelDetailMainService'
export default {
  components: {
    ModelDetailMainEcuLists,
    ModelDetailMainVicleLists,
    ModelDetailMainService
  },
  props: {
    modelId: {
      type: String,
      default: ''
    },
    numType: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      instantUpdateTime: (state) => state.app.instantUpdateTime
    })
  },
  data () {
    return {
      activeKey: 'relatedECU'
    }
  },
  watch: {
    instantUpdateTime: {
      handler () {
        this.activeKey = this.numType || 'relatedECU'
      },
      immediate: true
    }
  }
}
</script>
<style lang="less">
.modelDetailMain {
  .modelDetailMainTab {
    height: 100%;
    display: flex;
    flex-direction: column;
    .ant-tabs-top-bar {
      flex: none;
    }
    .ant-tabs-content {
      flex: 1 0 0;
      // overflow: hidden;
      // padding-right: 24px;
    }
  }
}
</style>
